<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue3</title>
  </head>

  <body>
    <div id="app">
      <!-- 4. 在 #app 容器中，用 v-for="(value, key) in arr" 遍历数组
 -->
      <!-- 5. 模板中显示每个元素的值 (value) 和索引 (key) -->
      <div v-for="(value, key) in arr">{{value}}--{{key}}</div>
    </div>

    <script src="vue3.js"></script>
    <script>
      // 1. 引入 Vue 3，获取 createApp 和 ref
      const { createApp, ref } = Vue;

      const app = createApp({
        setup() {
          // 2. 创建应用，在 setup 中用 ref 定义包含 5 个名字的数组 arr
          const arr = ref(["小王", "小李", "小张", "小赵", "小钱"]);

          return {
            // 3. 返回 arr 供模板使用
            arr,
          };
        },
      });
      // 6. 将应用挂载到 #app 元素上
      app.mount("#app");
    </script>
  </body>
</html>
